<template>
  <div
    :class="{
      'message-container-left': left,
      'message-container-right': !left,
    }"
  >
    <head-img :ID="msgData.userID"></head-img>
    <div class="name-content">
      <div class="name" v-show="nameShow">
        {{ $store.state.userList[msgData.userID].name }}
      </div>
      <div class="bubble">
        <div :class="{ 'money-rect': true, received: isReceived }">
          <div
            :class="{
              'money-tri-left': left,
              'money-tri-right': !left,
            }"
          ></div>
          <div class="content">
            <img class="money-img" src="../../assets/images/转账.png" />
            <div class="money-text">
              <div class="money-num">￥{{ moneyFloat }}</div>
              <div class="money-to">{{ moneyTo }}</div>
            </div>
          </div>
          <el-divider class="hr"></el-divider>
          <div class="compo-name"><div>微信转账</div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeadImg from "@/components/HeadImg";
export default {
  data() {
    return {};
  },
  components: {
    "head-img": HeadImg,
  },
  props: {
    msgData: {
      type: Object,
    },
  },
  computed: {
    left() {
      if (this.msgData.userID == 0) {
        return false;
      } else return true;
    },
    moneyFloat() {
      return parseFloat(this.msgData.info).toFixed(2);
    },
    moneyTo() {
      if (this.msgData.receiveState == 0) {
        if (this.msgData.userID == 0) {
          if (this.$store.state.userList[1])
            return "转账给" + this.$store.state.userList[1].name;
          else return "请添加用户";
        }else{
            return "转账给你"
        }
      }
      if (this.msgData.receiveState == 1) {
        return "已被领取";
      } else return "已收款";
    },
    nameShow() {
      if (this.msgData.userID == 0) return false;
      if (this.$store.state.dialogueType == "single") return false;
      return true;
    },
    isReceived() {
      // return this.msgData.receiveState
      if (this.msgData.receiveState > 0) return true;
      return false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/message.scss";
.money-rect {
  @include asset-frame;
  background-color: rgb(249, 157, 58);
  .hr {
    background-color: rgb(255, 176, 85);
    color: rgb(255, 176, 85);
  }
}

//接收状态样式
.received {
  background-color: rgb(252, 225, 195);
  .hr {
    background-color: rgb(255, 230, 203);
  }
  .compo-name{
      color:rgb(255, 247, 236)
  }
  .money-tri-left {
    border-color: transparent rgb(252, 225, 195) transparent transparent;
  }
  .money-tri-right {
    border-color: transparent transparent transparent rgb(252, 225, 195);
  }
}

.money-img {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  margin-right: 10px;
  object-fit: cover;
}
.money-num {
  font-weight: 500;
}
.money-to {
  font-size: 13px;
}
.money-tri-left {
  @include triangle;
  border-color: transparent rgb(249, 157, 58) transparent transparent;
  left: $triangle-size;
}
.money-tri-right {
  @include triangle;
  border-color: transparent transparent transparent rgb(249, 157, 58);
  right: $triangle-size;
}
</style>